<div class="tabbar">
	<a href="/" class="tab-item" data-key="home">
		<span class="icon"><img src="/img/icon1.png" alt="首页"></span>
		<span class="label">首页</span>
	</a>
	<a href="/catgory.php" class="tab-item" data-key="cate">
		<span class="icon"><img src="/img/icon2.png" alt="分类"></span>
		<span class="label">分类</span>
	</a>
	<a href="/user/" class="tab-item" data-key="me">
		<span class="icon"><img src="/img/icon4.png" alt="我的"></span>
		<span class="label">我的</span>
	</a>
</div>

<style>
	.tabbar{
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		background: #fff;
		border-top: 1px solid #f1f5f9;
		box-shadow: 0 -6px 20px rgba(0,0,0,0.04);
		height: 64px;
		padding-bottom: calc(env(safe-area-inset-bottom, 0));
		z-index: 999;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	.tab-item{
		flex: 1;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-decoration: none;
		color: #6b7280; /* 未激活文字 */
	}
	.tab-item .icon{
		width: 26px;
		height: 26px;
		display: block;
		margin-bottom: 4px;
	}
	.tab-item .icon img{
		width: 100%; height: 100%; display: block;
		filter: grayscale(100%) brightness(0.6); /* 未激活图标灰 */
	}
	.tab-item .label{
		font-size: 13px;
		line-height: 1;
	}
	.tab-item.active{
		color: #253043; /* 激活文字颜色（深蓝灰，接近截图） */
		font-weight: 600;
	}
	.tab-item.active .icon img{
		filter: none; /* 激活图标恢复原色 */
	}
	/* 给页面主体留出 tabbar 高度，避免被遮挡（如页面没自带内边距时） */
	body{ padding-bottom: 64px; }
	@supports (padding-bottom: env(safe-area-inset-bottom)){
		body{ padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
	}
</style>

<script>
		// 根据当前路径高亮对应项
		(function() {
		var path = location.pathname.replace(/\/+$/, ""); // 去尾部斜杠
		var items = document.querySelectorAll(".tabbar .tab-item");
		items.forEach(function(a){
			var href = a.getAttribute("href") || "";
			var norm = href.replace(/\/+$/, "");
			// 主页精确等于根，其他使用 startsWith 规则
			var isActive = (norm === "" || norm === "/") ? (path === "" || path === "/") : path.indexOf(norm) === 0;
			if(isActive){ a.classList.add("active"); }
		});
	})();
	$(".close").on("click",function(){
		$(".fixed").hide();
	});
	var bodyWidth = document.documentElement.clientWidth / 6.4;
	if (bodyWidth > 100) {
		document.documentElement.style.fontSize = 100 + "px";		
	} else {
		document.documentElement.style.fontSize = bodyWidth + "px";
	}
</script>